<template>
  <div>
    <el-row>
      <el-col :span="5">
        <el-select
          v-model="optValue"
          @change="selectRole"
          clearable
          placeholder="选择角色"
        >
          <el-option
            v-for="item in options"
            :key="item.id"
            :label="item.roleName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="2" :offset="16">
        <el-button type="primary" @click="confirmChange">确认更改</el-button>
      </el-col>
    </el-row>
    <el-card style="margin-top: 30px" class="box-card">
      <el-row>
        <div v-for="req in reqPath" :key="req.id">
          <el-col style="margin-bottom: 30px">
            <el-divider content-position="left">{{ req.name }}</el-divider>
            <span
              style="margin-right: 20px"
              v-for="o in req.reqPath"
              :key="o.id"
            >
              <el-divider direction="vertical"></el-divider>
              <el-checkbox v-model="o.isCheck">{{ o.optName }}</el-checkbox>
            </span>
          </el-col>
        </div>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  mounted() {
    window.vue = this;
  },
  created() {
    this.selRepPath();
    this.selRole();
  },
  data() {
    return {
      checked: false,
      reqPath: [],
      options: [],
      optValue: "",
    };
  },
  methods: {
    confirmChange() {
      // console.log(this.reqPath);
      // console.log(this.optValue);
      let requestPathIds = [];
      this.reqPath.forEach((e) => {
        e.reqPath.forEach((e) => {
          if (e.isCheck == true) {
            requestPathIds.push(e.id);
          }
        });
      });
      // console.log(requestPathIds);
      if (this.optValue == "") {
        this.$message({
          showClose: true,
          message: "请选择一个角色",
          type: "warning",
        });
        return;
      }
      let params = {};
      params.roleId = this.optValue;
      params.requestPathIds = requestPathIds;
      this.$axios
        .post("api/uums-server/updateRoleReqPath", params)
        .then((response) => {
          if (response.data.code == 200) {
            //this.selRepPath();
            //this.selRole();
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success",
            });
          }
        });
    },
    selectRole() {
      // console.log(this.optValue);
      this.$axios
        .get("api/uums-server/selectReqPathByRoleId", {
          params: { roleId: this.optValue },
        })
        .then((response) => {
          if (response.data.code == 200) {
            this.reqPath.forEach((e) => {
              e.reqPath.forEach((i) => {
                // console.log(i);
                i.isCheck = false;
                if (response.data.data) {
                  if (response.data.data.indexOf(i.id) != -1) {
                    i.isCheck = true;
                  }
                }
              });
            });
          } else if (response.data.code == 613) {
            this.reqPath.forEach((e) => {
              e.reqPath.forEach((i) => {
                // console.log(i);
                i.isCheck = false;
              });
            });
          }
        });
    },
    selRepPath() {
      this.$axios.get("api/uums-server/selRepPath").then((response) => {
        if (response.data.code == 200) {
          //   console.log(response.data.data);
          this.reqPath = response.data.data;
          this.reqPath.forEach((e) => {
            e.reqPath.forEach((ie) => {
              this.$set(ie, "isCheck", false);
            });
          });
        }
      });
    },
    selRole() {
      this.$axios.get("api/uums-server/selRole").then((response) => {
        if (response.data.code == 200) {
          //   console.log(response.data.data);
          this.options = response.data.data;
        }
      });
    },
  },
};
</script>

<style scoped></style>
